<template>
  <div class="sys-params">
    <div class="tabControl" @click="showHeader = !showHeader" :class="{ hide: !showHeader }">
      <icon-svg name="iconArrow"></icon-svg>
    </div>
    <el-tabs tab-position="left" v-model="tabName" @tab-click="handleClick" :class="{ 'hide-header': !showHeader }">
      <el-tab-pane label="应用平台" name="PLATFORM">
        <platform ref="PLATFORM"></platform>
      </el-tab-pane>
      <el-tab-pane label="数据平台" name="DATAPLATFORM">
        <data-platform ref="DATAPLATFORM"></data-platform>
      </el-tab-pane>
      <el-tab-pane label="公司类型" name="COMPTYPE">
        <dict ref="COMPTYPE" headerTitle="公司类型"></dict>
      </el-tab-pane>
      <el-tab-pane label="标签类别" name="TAGKIND">
        <dict ref="TAGKIND" headerTitle="标签类别"></dict>
      </el-tab-pane>
      <el-tab-pane label="取值类型" name="VALUETYPE">
        <dict ref="VALUETYPE" headerTitle="取值类型"></dict>
      </el-tab-pane>
      <el-tab-pane label="更新频率" name="FREQ">
        <dict ref="FREQ" headerTitle="更新频率"></dict>
      </el-tab-pane>
      <el-tab-pane label="客户统计范围" name="STATRANGE">
        <dict ref="STATRANGE" headerTitle="客户统计范围"></dict>
      </el-tab-pane>
      <el-tab-pane label="统计粒度" name="HQ">
        <dict ref="HQ" headerTitle="统计粒度"></dict>
      </el-tab-pane>
      <el-tab-pane label="应用渠道" name="CHANNEL">
        <dict ref="CHANNEL" headerTitle="应用渠道"></dict>
      </el-tab-pane>
      <!-- <el-tab-pane label="使用限制" name="ORG">
        <dict ref="ORG" headerTitle="使用限制"></dict>
      </el-tab-pane> -->
      <el-tab-pane label="体系类型" name="CATALOG">
        <dict ref="CATALOG" headerTitle="体系类型"></dict>
      </el-tab-pane>
      <el-tab-pane label="客群画像" name="TAG_PROFILE">
        <factory ref="TAG_PROFILE"></factory>
      </el-tab-pane>
      <el-tab-pane label="数据权限" name="DATA_AUTH">
        <data-auth ref="DATA_AUTH"></data-auth>
      </el-tab-pane>
      <!-- <el-tab-pane label="字典" name="DICT">
        <dict ref="DICT"></dict>
      </el-tab-pane> -->
      <el-tab-pane label="调度" name="SCHEDULE">
        <schedule ref="SCHEDULE"></schedule>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import platform from '../platform'
import dataPlatform from '../data-platform'
import dict from '../dict-user-data'
import factory from './factory-item'
import dataAuth from './data-auth-item'
import schedule from './schedule-item'
export default {
  components: {
    platform,
    dataPlatform,
    dict,
    factory,
    dataAuth,
    schedule
  },
  data() {
    return {
      tabName: 'PROCESS',
      showHeader: true,
      params: {
        KEEPPERIOD: [],
        SCHEDULE: []
      },
      dict: [
        { name: 'COMPTYPE', dictId: 4 },
        { name: 'TAGKIND', dictId: 9 },
        { name: 'VALUETYPE', dictId: 13 },
        { name: 'FREQ', dictId: 14 },
        { name: 'STATRANGE', dictId: 21 },
        { name: 'HQ', dictId: 22 },
        { name: 'CHANNEL', dictId: 23 },
        { name: 'ORG', dictId: 24 },
        { name: 'CATALOG', dictId: 25 }
      ]
    }
  },
  watch: {
    $route(val) {
      if (val.name === 'system-params') {
        this.tabName = this.$route.query.tabName || 'PLATFORM'
        let component = this.$refs[this.tabName]
        if (component) {
          if (component.getParams) component.getParams(this.tabName)
          if (component.initData) component.initData()
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tabName = this.$route.query.tabName || 'PLATFORM'
      if (this.$refs[this.tabName].getParams) this.$refs[this.tabName].getParams(this.tabName)
      let tabDict = this.dict.find(item => item.name === this.tabName)
      if (tabDict) this.$refs[this.tabName].initData(tabDict.dictId)
    })
  },
  methods: {
    handleClick(tab) {
      let arg = { name: 'system-params', query: { tabName: tab.name } }
      let tabDict = this.dict.find(item => item.name === tab.name)
      if (tabDict) arg.params = { dictId: tabDict.dictId }
      this.$router.push(arg)
    }
  }
}
</script>

<style lang="scss">
.sys-params {
  position: absolute;
  top: 60px;
  right: 15px;
  bottom: 15px;
  left: 0;
  .el-tabs {
    height: 100%;
    .el-tabs__header {
      width: 150px;
      transition: all 0.3s linear;
    }
    &.hide-header .el-tabs__header {
      width: 0;
    }
  }
  .el-tabs--left .el-tabs__item.is-left {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    height: 50px;
    line-height: 50px;
  }
  .tabControl {
    width: 15px;
    height: 20px;
    background-color: #f0ecec;
    border-left: 1px solid #e6e6e6;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 50%;
    left: 135px;
    margin-top: -7.5px;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s linear;
    &:before,
    &:after {
      content: '';
      position: absolute;
      right: -0;
    }
    &:before {
      border-width: 15px 15px 0 0;
      border-style: solid;
      border-color: transparent#f0ecec transparent transparent;
      margin-top: -15px;
    }
    &:after {
      border-width: 15px 0 0 15px;
      border-style: solid;
      border-color: #f0ecec transparent transparent transparent;
      margin-top: 20px;
    }
    &.hide {
      left: 0;
      transform: rotate(180deg);
    }
    svg {
      width: 100%;
      height: 100%;
      color: #aaa;
    }
  }
  .el-tabs--left {
    .el-tabs__header.is-left {
      margin-right: 15px;
    }
    .el-tabs__active-bar {
      background-color: #f0ecec;
    }
    .el-tabs__content {
      height: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        overflow: auto;
      }
      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: transparent;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(144, 147, 153, 0.5);
      }
    }
  }
  .el-form {
    .el-col {
      padding: 0 30px;
    }
    .el-select,
    .el-input-number {
      width: 100%;
    }
    .el-icon-info {
      margin-left: 5px;
      cursor: pointer;
    }
    .params-star {
      .el-form-item__label:before {
        display: inline;
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
      }
    }
    .el-button.disable {
      background-color: $border-color;
      border-color: $border-color;
    }
    .el-input-number {
      width: 100%;
      .el-input.is-disabled .el-input__inner {
        color: #606266;
      }
    }
    .el-select {
      .el-input {
        &.is-disabled {
          .el-input__inner[readonly='readonly'] {
            color: #606266;
            background-color: #f5f7fa;
          }
        }
        .el-input__inner[readonly='readonly'] {
          background-color: #fff;
        }
      }
    }
    .el-date-editor,
    .el-input {
      .el-input__inner[readonly='readonly'] {
        background-color: #f5f7fa;
      }
    }
    .el-textarea .el-textarea__inner[readonly='readonly'] {
      background-color: #f5f7fa;
    }
    .ldap-input {
      .el-input.is-disabled .el-input__inner {
        color: #606266;
      }
    }
    .editable {
      .el-input {
        .el-input__inner[readonly='readonly'] {
          background-color: #fff;
        }
      }
    }
  }
}
</style>
